@charset "utf-8";
html,
body {
    width: 100%;
    height: 100%;
    .content {
        .btns-box {
            display: flex;
            flex-direction: row-reverse;
            button {
                width: 50px;
                margin-left: 10px;
            }
        }
    }
    .footer {
        margin-bottom: 7px;
    }
    .addTask {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 9999;
        .shade-bg {
            position: absolute;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .5);
        }
        .shade-content {
            position: absolute;
            width: 80%;
            height: 300px;
            background: #ffffff;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            textarea {
                color: #0894ec;
                width: 100%;
                height: 80%;
                resize: none;
            }
            button {
                margin-right: 20px;
            }
        }
    }
    .removeTask {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 9999;
        .shade-bg {
            position: absolute;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .5);
        }
        .shade-content {
            position: absolute;
            width: 80%;
            height: 100px;
            background: #ffffff;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            p {
                color: #0894ec;
                margin-left: 20px;
            }
            button {
                margin-right: 20px;
            }
        }
    }
}